<template>
  <div>
    <!--   @close="dialogOpen = false" -->
    <el-dialog
      :visible.sync="dialogOpen"
      center
      width="40%"
      top="50px"
      :close-on-click-modal="false"
      v-if="dialogOpen"
    >
      <template slot="title">
        <div
          class="custom-header"
          :style="{
            backgroundColor: headerStyle,
            color: '#fff',
            height: '50px',
            lineHeight: '50px',
          }"
        >
          {{ title + '订单' }}
        </div>
      </template>
      <div class="flexBox">
        <p>
          <span>店铺名称：</span>
          <el-input
            size="small"
            style="width: 230px"
            placeholder="请输入店铺名称"
            v-model="data.storeName"
          ></el-input>
        </p>
        <p>
          <span>付款方式：</span>
          <el-select
            size="small"
            style="width: 230px"
            placeholder="请选择付款方式"
            v-model.number="data.paymentMethod"
          >
            <el-option
              v-for="(item, index) in payTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </p>
        <!-- <p>
          <span>发货时间：</span>
          <el-date-picker
            style="width: 230px"
            clearable
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="请选择发货时间"
            v-model="data.deliveryDate"
          ></el-date-picker>
        </p> -->
      </div>
      <div class="flexBox">
        <p>
          <span>材料付款金额：</span>
          <el-input
            size="small"
            type="number"
            style="width: 230px"
            placeholder="请输入付款金额"
            v-model="data.materialPayMoney"
          ></el-input>
        </p>
        <p>
          <span>材料下单金额：</span>
          <el-input
            size="small"
            type="number"
            style="width: 230px"
            placeholder="请输入下单金额"
            v-model="data.materialPlaceMoney"
          ></el-input>
        </p>
      </div>
      <div class="flexBox">
        <p>
          <span>品牌类型：</span>
          <el-select
            size="small"
            style="width: 230px"
            placeholder="请选择品牌类型"
            v-model.number="data.systemType"
          >
            <el-option
              v-for="(item, index) in ppTypeList"
              :key="index"
              :label="item.systemName"
              :value="item.id"
            ></el-option>
          </el-select>
        </p>
        <p>
          <span>所属区域：</span>
          <el-select
            size="small"
            style="width: 230px"
            placeholder="请选择订单所属区域"
            v-model="data.area"
          >
            <el-option
              :label="item.areaName"
              :value="item.area"
              :key="item.area"
              v-for="item in areaData"
            ></el-option>
          </el-select>
        </p>
      </div>
      <div
        class="flexBox"
        style="justify-content: flex-start; padding-left: 16px"
      >
        <p>
          <span>付款时间：</span>
          <el-date-picker
            style="width: 230px"
            clearable
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="请选择材料付款时间"
            v-model="data.materialPayTime"
          ></el-date-picker>
        </p>
      </div>
      <div
        class="flexBox"
        style="justify-content: flex-start; padding-left: 16px"
      >
        <p style="display: flex">
          <span style="width: 99px">付款凭证：</span>
          <uploader
            v-model="payImg"
            :isDrag="true"
            :headerStyle="headerStyle"
          ></uploader>
        </p>
      </div>
      <!-- <div class="flexBox">
        <p>
          <span>客户电话：</span>
          <el-input
            size="small"
            style="width: 230px"
            placeholder="请输入客户联系方式"
            v-model="data.customPhone"
          ></el-input>
        </p>
        <p>
          <span>订单类型：</span>
          <el-select
            size="small"
            style="width: 230px"
            placeholder="请选择订单类型"
            v-model.number="data.orderType"
          >
            <el-option label="新增店铺" :value="1"></el-option>
            <el-option label="老店翻新" :value="2"></el-option>
          </el-select>
        </p>
      </div> -->
      <!-- <div class="flexBox">
        <p>
          <span>所属区域：</span>
          <el-select
            size="small"
            style="width: 230px"
            placeholder="请选择订单所属区域"
            v-model="data.area"
          >
            <el-option
              :label="item.areaName"
              :value="item.area"
              :key="item.area"
              v-for="item in areaData"
            ></el-option>
          </el-select>
        </p>
        <p>
          <span>距离：</span>
          <el-input
            size="small"
            style="width: 230px"
            placeholder="请输入距离(/米)"
            v-model="data.distance"
          ></el-input>
        </p>
      </div> -->
      <!-- <div class="flexBox">
        <p>
          <span>发货地址：</span>
          <el-input
            size="small"
            placeholder="请输入发货地址"
            type="textarea"
            style="width: 230px"
            v-model="data.address"
          ></el-input>
        </p>
        <p>
          <span>快递费用：</span>
          <el-input
            size="small"
            style="width: 230px"
            placeholder="请输入费用"
            v-model="data.expressCharge"
          ></el-input>
        </p>
      </div> -->
      <!-- <div class="flexBox">
        <p>
          <span>遗留订单：</span>
          <el-select
            size="small"
            style="width: 230px"
            placeholder="请选择是否为遗留订单"
            v-model.number="data.isHistoryOrder"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="2"></el-option>
          </el-select>
        </p>
        <p>
          <span>付款卡号：</span>
          <el-input
            size="small"
            style="width: 230px"
            placeholder="请输入卡号"
            v-model="data.payCard"
          ></el-input>
        </p>
      </div> -->
      <!-- <div class="flexBox">
        <p>
          <span>实付金额：</span>
          <el-input
            size="small"
            style="width: 230px"
            placeholder="请输入实付金额"
            v-model="data.payMoney"
          ></el-input>
        </p>
        <p>
          <span>面积/平方：</span>
          <el-input
            size="small"
            style="width: 230px"
            placeholder="请输入面积"
            v-model="data.storeArea"
          ></el-input>
        </p>
      </div> -->
      <!-- <div class="flexBox">
        <p>
          <span>付款时间：</span>
          <el-date-picker
            style="width: 230px"
            clearable
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="请选择付款时间"
            v-model="data.payTime"
          ></el-date-picker>
        </p>
        <p style="width: 310px">
          <span style="width: 100px">是否卡游层板：</span>
          <el-switch
            v-model.number="data.isKaYou"
            :activeValue="1"
            :inactiveValue="0"
          ></el-switch>
        </p>
      </div> -->
      <!-- <div class="flexBox">
        <p style="width: 310px; display: flex">
          <span style="width: 110px">营业区原始图：</span>
          <uploader v-model="fileList1" :headerStyle="headerStyle"></uploader>
        </p>
        <p style="width: 310px; display: flex">
          <span style="width: 100px">仓库原始图：</span>

          <uploader v-model="fileList2" :headerStyle="headerStyle"></uploader>
        </p>
      </div> -->
      <span slot="footer">
        <el-button @click="dialogOpen = false">取 消</el-button>
        <el-button
          @click="_submitNew"
          :style="{ background: headerStyle, color: '#ffffff', border: 'none' }"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import uploader from '../../../components/Element/Uploader.vue'

export default {
  name: 'add',
  components: {
    uploader,
  },
  data() {
    return {
      ppTypeList: [],
      dialogOpen: false,
      areaData: [],
      title: '',
      fileList1: '',
      fileList2: '',
      systemType: '',
      payTypeList: [],
      payImg: '', //付款凭证
      data: {
        systemType: null,
        materialPlaceMoney: 0, //下单金额
        materialPayMoney: 0, //付款金额
        materialPayVoucher: '', //付款凭证
        paymentMethod: null, //付款方式 1 9076 2 5127 3 6666 4 曹总微信 5 财务2微信 6 曹总支付宝
        storeName: '', //店铺名称
        materialPayTime: '', //材料付款时间
        // deliveryDate: '',
        // customPhone: '',
        // orderType: '',
        area: '', //所属区域(仓库)
        // address: '',
        // expressCharge: '',
        // distance: '',
        // isHistoryOrder: '',
        // payCard: '',
        // payMoney: '',
        // storeArea: '',
        // payTime: null,
        // isKaYou: '',
      },
    }
  },
  computed: {
    headerStyle() {
      const colorMap = {
        1: '#409EFF',
        2: '#121552',
        3: '#67C23A',
        4: '#E6A23C',
        5: '#F56C6C',
        6: '#2E8B57',
        7: '#9A7DFF',
        8: '#FF7F50',
        9: '#00CED1',
        10: '#9370DB',
        11: '#4682B4',
        12: '#8B008B',
        13: '#20B2AA',
      }
      return colorMap[String(this.systemType)] || '#66b1ff'
    },
  },
  //   created() {
  //     this.getPayType()
  //   },
  methods: {
    async getPayType() {
      const res = await this.$api.orderGetPaymentMethod()
      const res2 = await this.$api.orderGetSystemTypeVo() //品牌类型
      if (res && res.length) {
        this.payTypeList = []
        this.payTypeList = res
      }
      if (res2 && res2.length) {
        this.ppTypeList = []
        this.ppTypeList = res2
      }
    },
    handleOpen(row, area, type) {
      this.dialogOpen = true
      this.systemType = row.systemType
      this.areaData = area
      if (type == 1) {
        this.title = '新增'
        this.data = this.$options.data.call(this).data
        this.fileList1 = ''
        this.fileList2 = ''
        this.payImg = ''
        this.getPayType()
      }
      if (type == 2) {
        this.title = '编辑'
        Object.keys(this.data).forEach((key) => {
          if (row.hasOwnProperty(key)) {
            this.data[key] = row[key]
            this.data.id = row.id
            this.fileList1 = row.storeImgs ? row.storeImgs.toString() : ''
            this.fileList2 = row.storageOriginImg
              ? row.storageOriginImg.toString()
              : ''
          }
        })
      }
    },
    async _submitNew() {
      let form = this.data
      if (!form.storeName) {
        return this.$message.warning('请输入店铺名称！')
      }
      if (!form.paymentMethod) {
        return this.$message.warning('请选择付款方式！')
      }
      if (!form.materialPayMoney || form.materialPayMoney < 0) {
        return this.$message.warning('请输入正确的付款金额！')
      }
      if (!form.materialPlaceMoney || form.materialPlaceMoney < 0) {
        return this.$message.warning('请输入正确的下单金额！')
      }
      if (!form.systemType) {
        return this.$message.warning('请选择品牌类型！')
      }
      if (!form.area) {
        return this.$message.warning('请选择所属区域！')
      }
      if (!form.materialPayTime) {
        return this.$message.warning('请选择付款时间！')
      }
      if (!this.payImg) {
        return this.$message.warning('请上传付款凭证！')
      }

      form.materialPayVoucher = this.payImg
      try {
        const apiMap = {
          新增: this.$api.orderAdd,
          编辑: '',
        }
        const apiFunc = apiMap[this.title]
        if (!apiFunc) return
        const resDate = await apiFunc(form)
        console.log('新增结果', resDate)

        this.$message.success(`${this.title}成功！`)
        this.dialogOpen = false
        this.$emit('addStatus', 1)
      } catch (err) {
        console.error('接口请求出错：', err)
        this.$message.error('操作失败，请稍后重试')
      }
    },
    async _submit() {
      let form = this.data
      form.systemType = this.systemType
      form.storeImgs = this.fileList1
      form.storageOriginImg = this.fileList2
      form.storageOriginImg = Array.isArray(form.storageOriginImg)
        ? form.storageOriginImg
        : [form.storageOriginImg]
      form.storeImgs = Array.isArray(form.storeImgs)
        ? form.storeImgs
        : [form.storeImgs]
      if (!/^\d+$/.test(form.distance))
        return this.$message.warning('距离应为纯数字！')
      try {
        const apiMap = {
          新增: this.$api.newOrderCreate,
          编辑: this.$api.orderOrderInfoUpdate,
        }
        const apiFunc = apiMap[this.title]
        if (!apiFunc) return
        const resDate = await apiFunc(form)
        this.$message.success(`${this.title}成功！`)
        this.dialogOpen = false
        this.$emit('addStatus', 1)
      } catch (err) {
        console.error('接口请求出错：', err)
        this.$message.error('操作失败，请稍后重试')
      }
    },
  },
}
</script>

<style scoped lang="less">
/deep/.el-dialog__header {
  padding: 0;
  font-size: 16px;
}

.flexBox {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;

  span {
    // width: 80px;
    width: 99px;
    display: inline-block;
  }
}
</style>
